<template>
  <!-- 熔炼工单表表单弹窗 -->
  <el-dialog
    v-model="visibleDialog"
    :title="props.title"
    width="1100px"
    draggable
    @close="closeDialog"
  >
    <el-row>
      <!-- 辅料数据第二行 -->
      <el-col :span="24">
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <div class="mb-[10px] text-[14px] font-700">主料化验数据</div>
        </div>
        <div>
          <el-table
            :data="demo.mdmMaterialDTO"
            style="width: 100%"
            :key="Math.random"
            :header-cell-style="{ textAlign: 'center' }"
            border
          >
            <el-table-column
              label="材料名称"
              props="cailiaomingcheng"
              min-width="100"
            >
              <template #default="{ $index, row }">
                <span>{{ row.cailiaomingcheng }}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-for="(e, index) in demo.item"
              min-width="80"
              :label="e.name"
              align="center"
            >
              <template #default="scope">
                {{ scope.row[e.name] || "0" }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>

      <!-- 成分含量第二行 -->
      <el-col :span="24" style="margin-top: 20px">
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <div class="mb-[10px] mt-[20px] text-[14px] font-700">
            回炉料化验数据
          </div>
        </div>
        <el-table
          :data="demo.scrapReturnList"
          style="width: 100%"
          :key="Math.random"
          :header-cell-style="{ textAlign: 'center' }"
          border
        >
          <el-table-column
            label="材料名称"
            props="cailiaomingcheng"
            min-width="100"
          >
            <template #default="{ $index, row }">
              <span>{{ row.cailiaomingcheng }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-for="(e, index) in demo.item"
            min-width="80"
            :label="e.name"
            align="center"
          >
            <template #default="scope">
              {{ scope.row[e.name] || "0" }}
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <template #footer>
      <div class="dialog-footer">
        <el-button
          v-if="!props.isReadonly"
          type="primary"
          :loading="loading"
          @click="handleSubmit"
          >确 定</el-button
        >
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { useDictStoreHook } from "@/store/modules/dictionary"; // 引入
const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "MESSMTORDERADDORUPDATE",
  inheritAttrs: false,
});

const emit = defineEmits(["reset-table", "change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});

const visibleDialog = ref(false);
watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
    setTimeout(() => {
      formRef.value.clearValidate();
    }, 50);
  }
);

const rules = reactive({
  sort: [],
  orderCode: [
    { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" },
  ],
  batchNo: [
    { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" },
  ],
  productCode: [
    { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" },
  ],
  productName: [
    { min: 1, max: 90, message: "长度在 1 到 90 个字符", trigger: "blur" },
  ],
  planId: [
    { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" },
  ],
  planCode: [
    { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" },
  ],
  planDate: [],
  deviceId: [
    { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" },
  ],
  deviceCode: [
    { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" },
  ],
  planStatus: [],
  meltingStatus: [],
  stoveNumber: [],
  producePlanStarttime: [],
  producePlanEndtime: [],
  productActualStarttime: [],
  productActualEndtime: [],
  enabled: [],
  deleted: [],
  createTime: [],
  createdUserId: [
    { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" },
  ],
  createdUserName: [
    { min: 1, max: 90, message: "长度在 1 到 90 个字符", trigger: "blur" },
  ],
  lastUpdatedUserId: [
    { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" },
  ],
  lastUpdatedUserName: [
    { min: 1, max: 90, message: "长度在 1 到 90 个字符", trigger: "blur" },
  ],
  lastUpdateTime: [],
});

const formRef = ref(ElForm);

let formData = reactive({
  id: "",
  sort: "",
  orderCode: "",
  batchNo: "",
  productCode: "",
  productName: "",
  planId: "",
  planCode: "",
  planDate: "",
  deviceId: "",
  deviceCode: "",
  planStatus: "",
  meltingStatus: "",
  stoveNumber: "",
  producePlanStarttime: "",
  producePlanEndtime: "",
  productActualStarttime: "",
  productActualEndtime: "",
  enabled: "",
  deleted: "",
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  lastUpdatedUserId: "",
  lastUpdatedUserName: "",
  lastUpdateTime: "",
});

watch(
  () => props.data,
  (newVal: any) => {
    formData.id = "";
    if (newVal?.id) {
      const {
        id,
        sort,
        orderCode,
        batchNo,
        productCode,
        productName,
        planId,
        planCode,
        planDate,
        deviceId,
        deviceCode,
        planStatus,
        meltingStatus,
        stoveNumber,
        producePlanStarttime,
        producePlanEndtime,
        productActualStarttime,
        productActualEndtime,
        enabled,
        deleted,
        createTime,
        createdUserId,
        createdUserName,
        lastUpdatedUserId,
        lastUpdatedUserName,
        lastUpdateTime,
      } = newVal;
      Object.assign(formData, {
        id,
        sort,
        orderCode,
        batchNo,
        productCode,
        productName,
        planId,
        planCode,
        planDate,
        deviceId,
        deviceCode,
        planStatus,
        meltingStatus,
        stoveNumber,
        producePlanStarttime,
        producePlanEndtime,
        productActualStarttime,
        productActualEndtime,
        enabled,
        deleted,
        createTime,
        createdUserId,
        createdUserName,
        lastUpdatedUserId,
        lastUpdatedUserName,
        lastUpdateTime,
      });
    }
  }
);

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
}

/** 重置表单 */
function resetForm() {
  formRef.value.resetFields();
  formRef.value.clearValidate();
  formData.id = "";
  formData.sort = "";
  formData.orderCode = "";
  formData.batchNo = "";
  formData.productCode = "";
  formData.productName = "";
  formData.planId = "";
  formData.planCode = "";
  formData.planDate = "";
  formData.deviceId = "";
  formData.deviceCode = "";
  formData.planStatus = "";
  formData.meltingStatus = "";
  formData.stoveNumber = "";
  formData.producePlanStarttime = "";
  formData.producePlanEndtime = "";
  formData.productActualStarttime = "";
  formData.productActualEndtime = "";
  formData.enabled = "";
  formData.deleted = "";
  formData.createTime = "";
  formData.createdUserId = "";
  formData.createdUserName = "";
  formData.lastUpdatedUserId = "";
  formData.lastUpdatedUserName = "";
  formData.lastUpdateTime = "";
}

const loading = ref(false);

/** 熔炼工单表保存提交 */
function handleSubmit() {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      loading.value = true;
      const text = formData.id ? "编辑" : "新增";
      await request({
        url: "/mes/smtorder/save",
        method: "post",
        data: formData,
      }).finally(() => {
        loading.value = false;
      });
      ElMessage.success(text + `成功`);
      closeDialog();
      emit("reset-table", formData.id);
    }
  });
}

// 组件销毁时调用
onBeforeUnmount(() => {
  visibleDialog.value = false;
  emit("change-visible", false);
});

const demo = {
  item: [
    {
      name: "C",
    },
    {
      name: "Si",
    },
    {
      name: "Mn",
    },
    {
      name: "S",
    },
    {
      name: "Cr",
    },
    {
      name: "Mo",
    },
    {
      name: "Cu",
    },
    {
      name: "Sb",
    },
    {
      name: "Ni",
    },
    {
      name: "Sn",
    },
  ],
  // 主数据
  mdmMaterialDTO: [
    {
      cailiaomingcheng: "生铁",
      C: "3.38",
      Si: "3.78",
      Mn: "3.78",
      S: "3.78",
      Cr: "3.78",
      Mo: "3.78",
      Cu: "3.78",
      Sb: "3.78",
      Ni: "3.78",
      Sn: "3.78",
    },
    {
      cailiaomingcheng: "高猛废钢",
      C: "1.75",
      Si: "1.75",
      Mn: "1.75",
      S: "1.75",
      Cr: "1.75",
      Mo: "1.75",
      Cu: "1.75",
      Sb: "1.75",
      Ni: "1.75",
      Sn: "1.75",
    },
    {
      cailiaomingcheng: "中猛废钢",
      C: "0.08",
      Si: "0.08",
      Mn: "0.08",
      S: "0.08",
      Cr: "0.08",
      Mo: "0.08",
      Cu: "0.08",
      Sb: "0.08",
      Ni: "0.08",
      Sn: "0.08",
    },
  ],
  // 回炉料
  scrapReturnList: [
    {
      cailiaomingcheng: "Q1",
      C: "3.38",
      Si: "3.78",
      Mn: "3.78",
      S: "3.78",
      Cr: "3.78",
      Mo: "3.78",
      Cu: "3.78",
      Sb: "3.78",
      Ni: "3.78",
      Sn: "3.78",
    },
    {
      cailiaomingcheng: "Q2",
      C: "1.75",
      Si: "1.75",
      Mn: "1.75",
      S: "1.75",
      Cr: "1.75",
      Mo: "1.75",
      Cu: "1.75",
      Sb: "1.75",
      Ni: "1.75",
      Sn: "1.75",
    },
    {
      cailiaomingcheng: "Q3",
      C: "0.08",
      Si: "0.08",
      Mn: "0.08",
      S: "0.08",
      Cr: "0.08",
      Mo: "0.08",
      Cu: "0.08",
      Sb: "0.08",
      Ni: "0.08",
      Sn: "0.08",
    },
  ],

  // 辅料数据
  auxiliaryData: [
    {
      cailiaomingcheng: "增碳剂",
      jisuanzhi: "478",
      shijizhi: "478",
      yingxiangyuansu: "C",
      tiozhengzhi: "2",
      mubiaozhi: "936",
    },
    {
      cailiaomingcheng: "增碳剂",
      jisuanzhi: "478",
      shijizhi: "478",
      yingxiangyuansu: "C",
      tiozhengzhi: "2",
      mubiaozhi: "936",
    },
    {
      cailiaomingcheng: "增碳剂",
      jisuanzhi: "478",
      shijizhi: "478",
      yingxiangyuansu: "C",
      tiozhengzhi: "2",
      mubiaozhi: "936",
    },
  ],
};

const radio2 = ref("首料");
</script>
<style lang="scss" scoped>
.formTable {
  :deep(.el-form-item) {
    margin: 0 0 13px 0 !important;
    width: 100%;
  }
}

:deep(.formTable .el-table .el-form-item) {
  padding: 11px 0 0 0 !important;
}
:deep(.formTable .el-table .el-form-item__error) {
  font-size: 11px !important;
}

:deep(.inputTable .el-table) {
  .el-table__body td.el-table__cell {
    // padding: 5px !important;
    padding: 0 !important;
  }
}

// :deep(.el-dialog .el-dialog__body) {
//   overflow-y: auto;
//   height: 65vh;
// }

// :deep(.search-container .el-input.el-input--default.el-input--suffix) {
//   // 固定宽度
//   width: 190px !important;
// }

// :deep(.search-container .el-form-item--default .el-form-item__label) {
//   // 固定宽度
//   justify-content: end;
// }

:deep(.el-descriptions__label.el-descriptions__cell.is-bordered-label) {
  min-width: 90px;
}
:deep(.el-descriptions__content.el-descriptions__cell.is-bordered-content) {
  min-width: 160px;
}
</style>
